<template>
  <div class="rank">
    <div class="w1200">
      <div class="rank-content">
        <div class="rank-aside">
          <div class="rank-type">
            <span
              :class="type === 'Top' ? 'active' : ''"
              @click="selectType('Top')"
              >Top榜</span
            >
            <span
              :class="type === 'Feature' ? 'active' : ''"
              @click="selectType('Feature')"
              >特色榜</span
            >
            <span
              :class="type === 'Other' ? 'active' : ''"
              @click="selectType('Other')"
              >场景榜</span
            >
          </div>
          <div class="aside-main">
            <ul>
              <li :class="item.id===rankInfo.id?'active':''"  v-for="item in list" :key="item.id" @click="choseSongList(item)">
                <div class="am-left">
                  <!-- <img src="@/assets/logo.jpg" /> -->
                  <el-image :src="item.coverImgUrl"></el-image>
                </div>
                <div class="am-right">
                  <p>{{item.name}}</p>
                  <p>{{item.updateFrequency}}</p>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="rank-main">
          <div class="rm-top">
            <div class="rm-left">
              <el-image :src="rankInfo.coverImgUrl"></el-image>
            </div>
            <div class="rm-right">
              <div class="rm-title">
                <h2>{{rankInfo.name}}</h2>
                <span>{{rankInfo.updateFrequency}}</span>
              </div>
              <div class="rm-num">
                <span><i class="el-icon-headset"></i>{{$util.handleNum(rankInfo.playCount)}}</span>
                <span><i class="el-icon-star-off"></i>{{$util.handleNum(rankInfo.subscribedCount)}}</span>
                <!-- <span><i class="el-icon-s-comment"></i>{{$util.handleNum(rankInfo.commentCount)}}</span> -->
              </div>
              <p>{{rankInfo.description}}</p>
            </div>
          </div>
          <div class="rm-play">
            <div class="list">
              <h2>歌曲列表</h2>
              <span>{{total}}</span>
            </div>
            <div @click="playAll" class="btn"><i class="el-icon-caret-right"></i>播放全部</div>
          </div>
           <div class="rank-footer">
          <div class="rk-songlist">
            <song-list :songList="playList" :pageIndex="pageIndex" class="rank-song"></song-list>
          </div>
          <pagination :total="total" :pageSize="pageSize" @changePage=changePage ></pagination>
        </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import SongList from "@/components/common/Song-list.vue";
import {formatSongInfo} from "@/utils/songs"
import Pagination from "@/components/common/Pagination.vue"
import {mapMutations}from 'vuex'
export default {
  components: {
    SongList,
    Pagination
  },
  data() {
    return {
      type: "Top",
      list: [],
      topList: [],
      featureLIst: [],
      otherList: [],
      rankInfo:{id:1,coverImgUrl:null},//防止报错添加假信息
      songList:[],
      playList:[],
      total:30,
      pageSize:30,
      pageIndex:0
    };
  },
  async created() {
    await this.getTopListDetail();
     this.choseSongList(this.list[0]);
    console.log(this.rankInfo)
  },
  async mounted(){
      
  },
  computed: {},
  methods: {
    ...mapMutations(['setPlayList','setIsPlayed','setPlayIndex']),
    async getTopListDetail() {
      const res = await this.$api.getTopListDetail();
      // console.log(res);
      //云音乐top榜
      this.topList = res.list.filter((item) => item.ToplistType);
      //   console.log(this.topList)
      //云音乐特色榜
      this.featureLIst = res.list.filter(
        (item) => !item.ToplistType && item.name.indexOf("云音乐") >= 0
      );
      // console.log(this.featureLIst)
      this.otherList = res.list.filter(
        (item) => !item.ToplistType && item.name.indexOf("云音乐") < 0
      );
      this.selectType(this.type);
    },
    async getSongList(){ //获取对应排行榜歌单数据
        const res = await this.$api.getSongList({id:this.rankInfo.id});
        console.log(res);
       this.songList = this.headelSongInfo(res.playlist.tracks,res.privileges);
       this.total=this.songList.length;
       this.changePage(1);
    //    console.log(this.songList)
    },
    selectType(type){ //修改排行榜类型
        this.type=type;
         if (this.type === "Top") {
        this.list = this.topList;
      }
      if (this.type === "Feature") {
        this.list = this.featureLIst;
      }
      if (this.type === "Other") {
        this.list = this.otherList;
      }
      this.choseSongList(this.list[0]);
    },
    choseSongList(item){  //获取对应排行榜歌曲列表
        this.rankInfo =item;
        this.getSongList();
        console.log(this.rankInfo)
        // console.log(item.id)
    },
    headelSongInfo(list,privileges){
        const ret=[];
        list.forEach((item,index)=>{
            if(item.id){ //判断歌曲是否有版权，为最终数组添加一个表示版权的属性
                item.license=!privileges[index].cp;//license为false表示可以播放,ture则表示没有版权
                ret.push(formatSongInfo(item)) //把原数据里不能直接用于渲染的数据修改为想要的数组
            }
        })
        return ret;
    },
    changePage(num){
      if(num===1){
        this.pageIndex=0;
        this.playList=this.songList.slice(0,30)
      }
      else{
        this.pageIndex=(num-1)*30
        this.playList=this.songList.slice((num-1)*30,num*30)
        // console.log(this.playList)
      }
      scrollTo(0,0);
    },
    playAll(){
      this.setPlayList(this.songList);
      this.setIsPlayed(true);
      this.setPlayIndex(0);
    }
  },
};
</script>
<style lang="less" scoped>
.rank {
  width: 100%;
  .w1200 {
    width: 1200px;
    min-height: 600px;
    overflow: hidden;
    margin: 0 auto;
    // border: 1px solid #ccc;
    .rank-content {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
    }
    .rank-aside {
      width: 300px;
      height: 401px;
      //   border: 1px solid yellow;
      margin-left: 20px;
      .rank-type {
        margin: 0 auto;
        width: 260px;
        height: 61px;
        box-shadow: 0 0 20px 0 rgba(65, 67, 70, 0.05);
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #999;
        // border: 1px solid blue;
        span {
          display: inline-block;
          padding: 20px 0;
          width: 42px;
          line-height: 20px;
          cursor: pointer;
          color: #333;
        }
        .active {
          position: relative;
          font-weight: 600;
        }
        .active::after {
          display: block;
          content: "";
          position: absolute;
          bottom: 22px;
          left: 1px;
          width: 40px;
          height: 6px;
          background-color: red;
          z-index: -1;
        }
      }
      .aside-main {
        width: 300px;
        height: 340px;
        //   border: 1px solid red;
        ul {
          .active {
            background-color: rgba(65, 67, 70, 0.05);
          }
          li:hover {
            background-color: rgba(65, 67, 70, 0.05);
          }
          li {
            cursor: pointer;
            width: 300px;
            height: 80px;
            padding: 10px 20px;
            display: flex;
            .am-left {
              width: 60px;
              height: 60px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .am-right {
              font-size: 13px;
              color: #ccc;
              padding-left: 15px;
              p:nth-child(1) {
                font-weight: 600;
                color: #333;
                padding-bottom: 23px;
              }
            }
          }
        }
      }
    }
    .rm-top {
      width: 840px;
      height: 162px;
      // border: 1px solid #ccc;
      display: flex;
      .rm-left {
        width: 150px;
        height: 150px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .rm-right {
        width: 678px;
        height: 162px;
        //    border: 1px solid yellow;
        padding: 20px;
        .rm-title {
          height: 35px;
          display: flex;
          h2 {
            padding-right: 20px;
          }
          span {
            text-align: center;
            line-height: 35px;
            color: #999;
          }
        }
        .rm-num {
          height: 21px;
          margin-top: 15px;
          margin-bottom: 5px;
          color: #999;
          span {
            margin-right: 10px;
            font-size: 13px;
            i {
              margin-right: 5px;
            }
          }
        }
        p {
          color: #999;
        }
      }
    }
    .rm-play {
      display: flex;
      justify-content: space-between;
      margin-top: 30px;
      .list {
        display: flex;
        height: 40px;
        span {
          font-size: 13px;
          color: #666;
          line-height: 35px;
          text-align: center;
          padding-left: 15px;
        }
      }
      .btn {
        width: 115px;
        height: 30px;
        border-radius: 50px;
        background-color: #ff641e;
        color: #fff;
        cursor: pointer;
        text-align: center;
        line-height: 30px;
        padding-left: 25px;
        position: relative;
        i {
          position: absolute;
          font-size: 20px;
          left: 15px;
          top: 4px;
        }
      }
    }
    .rank-footer{
      width: 840px;
      height: 100%;
      /deep/.rank-song{
        width: 100%;
      }
    }
  }
}
</style>
